<template>
    <div class="xiaoquan-collapse">
        <slot/>
    </div>
</template>


<script setup>
    import { collapseProps, collapseContextKey } from "./props";
    import { ref, provide } from "vue";
    defineOptions({
        name: "XiaoQuan-Collapse"
    });
    const emit = defineEmits(['change', 'update:modelValue'])
    const props = defineProps(collapseProps);
    let activeNames = ref(props.modelValue);
    const handleItemClick = (itemName)=> {
        // alert(itemName)
        let _activeNames = [...activeNames.value];
        if(props.accordion) { // 手风琴模式
            // 这里创建了一个新的数组，这个数组里面只有一个元素，就是用户点击的那个面板
            // 如果该元素已经存在于 activeNames 数组中，那么就说明用户点击的是已经打开的面板
            // 那么就应该把这个面板关闭，所以清空数组
            _activeNames = [activeNames.value[0].includes(itemName) ? '' : itemName];
        }else {
            let index = _activeNames.indexOf(itemName);
            if(index > -1) {
                _activeNames.splice(index, 1);
            }else {
                _activeNames.push(itemName);
            }
        }
        activeNames.value = _activeNames;
        emit('change', _activeNames);
        emit('update:modelValue', _activeNames);
    }

    provide(collapseContextKey, {
        activeNames,
        handleItemClick
    });
    console.log("collapseProps", props);
</script>

<style scoped lang="scss">

</style>